<template>
  <div id="search">
    <van-nav-bar
    left-text="返回"
    right-text="..."
    left-arrow
    @click-left="onClickLeft"
    :border="false"
    />

    <van-search v-model="value" placeholder="搜索商家，商品名称" shape="round" show-action>
        <template #action>
            <div @click="onSearch(value)" style="color:blueviolet">搜索</div>
        </template>
    </van-search>

    <router-view ref="child"></router-view>
    
</div>
</template>

<script>
import { Toast } from 'vant';
import { mapMutations } from 'vuex';


export default {
    data(){ //负责定义响应式数据
        return {
          value:'', 
        }
    },
    methods: {
        ...mapMutations('history',['pushed']),
        onSearch(val) {
            if( val ){
                this.pushed(val.trim());
                if(this.$route.name=='searchlist'){
                    this.$refs.child.updata(val.trim());
                }else{
                    this.$router.push({path:'/search/searchlist',query:{searchkey:val.trim()}});
                }
                
                val ='';
            }else{
                Toast('请输入内容')
            }
        },
        onClickLeft() {
        this.$router.go(-1);
        },
},

}
</script>

<style >
    *{
        margin: 0;
        padding: 0;
    }
    a{
        text-decoration: none;
    }
    .van-nav-bar__left{
        font-size: 18px;
        
    }
    .van-nav-bar__text{
        color: #000;
    }
    

</style>